<!-- 网页执行 网上往下执行 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 2、创建视图 -->
    <div id="app">
        <!-- 2、全局组件的使用 -->
        <btn :form-data="form"></btn>
        <btn></btn>
        <btn></btn>
        <btn></btn>
        <btn></btn>
        <btn></btn>
    </div>
</body>

</html>
<script>
    //向组件传递参数



    Vue.component("btn",{
        template:"<button v-on:click='++count'>点击+1-当前值为：{{formData}}</button>",
        data(){
            return {
                count:0 //定义count变量，初始值为0
            }
        },
        //接收父级传递的参数
        props:['formData']
    })

    // 3、创建实例
    new Vue({
        el: "#app", //必传
        data(){
            return {
                form:{
                    username:"zhangsan"
                }
            }
        }
    })

</script>